<!--
参数cx_是查询操作 ，使用方法是 this.cx_ = !this.cx_
参数hfcl_是回访处理操作 ，使用方法是 this.hfcl_ = !this.hfcl_
params是参数，用来作为查询的条件，有
params:{
    sjlx:"",//时间类型
    sjqj:"",//时间区间
    cllx:"",//处理类型
    khzl:"",//客户质量
    ldhm:"",//来电号码
    khly:"",//客户来源
    khxq:"",//客户需求
    zxcp:"",//质询产品
    yggh:"",//员工工号
    khmc:"",//客户名称
}
-->
<template>
    <div id="hotCenter_hfcl_hfcl_" class="container-fluid">
        <div class="layui-form" id="details">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>客户列表</legend>
            </fieldset>
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this" id="jrdhfTab" @click="tabList('jrdhf')">今日待回访</li>
                    <li id="jrjxTab"  @click="tabList('jrjx')">今日进线</li>
                    <li id="wdkhTab"  @click="tabList('wdkh')">我的客户</li>
                    <!--<li id="hykhTab"  @click="tabList('hykh')">会员客户</li>-->
                    <li id="wcjkhTab" @click="tabList('wcjkh')">未成交客户</li>
                    <li id="hfcxTab"  @click="tabList('hfcx')">回访查询</li>
                </ul>
                <div class="layui-tab-content" style="height: 400px;">
                    <!--今日待回访-->
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="jrdhfList" lay-filter="jrdhfList"></table>
                    </div>
                    <!--今日进线-->
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="jrjxList" lay-filter="jrjxList"></table>
                    </div>
                    <!--我的客户-->
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="wdkhList" lay-filter="wdkhList"></table>
                    </div>
                    <!--会员客户-->
                    <!--<div class="layui-tab-item">-->
                        <!--<table class="layui-hide" id="hykhList" lay-filter="hykhList"></table>-->
                    <!--</div>-->
                    <!--未成交客户-->
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="wcjkhList" lay-filter="wcjkhList"></table>
                    </div>
                    <!--回访查询-->
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="hfcxList" lay-filter="hfcxList"></table>
                    </div>
                </div>
            </div>
        </div>
        <div id="khxx" class="padding" style="display: none;">
            <v-khxx ref="khxx" v-bind:shadeClose="shadeClose" v-bind:shadeOpen="shadeOpen" v-bind:searhDatas="searhDatas" v-bind:searhDatas_="searhDatas_"  v-bind:editClose="editClose" v-bind:editOpen="editOpen"  v-bind:params="params"></v-khxx>
        </div>
        <script type="text/html" id="bar">
          <div class="el-button el-button--primary el-button--mini is-round" lay-event="view" >查看</div>
          <div class="el-button el-button--success el-button--mini is-round" lay-event="edit" >编辑</div>
        </script>
    </div>
</template>

<script>
    import khxx from "../../hotCenter/hwzx/khxx.vue"
    import {formatDateTime} from '../../../../common/js/util';
    export default {
        props: ['cx_','hfcl_','params'],
        components:{
            'v-khxx':khxx,
        },
        name: "index",
        watch:{
            cx_:function () {//cx_改变了就表示需要刷新界面
                this.cx(this.hfclClick)//查找暂存处理列表
            },
            zccl_:function () {//zccl_改变了就表示需要刷新界面
                this.shadeClose = !this.shadeClose;
            },
        },
        data: function () {
            return {
                shadeOpen:false,//遮罩开启
                shadeClose:false,//遮罩关闭
                searhDatas:false,//刷新话务中心
                editClose:false,//不能够编辑控制
                editOpen:false,//让其组件可以编辑
                header:[//列表的头
                    {field: 'id',  title: '序列号', sort: true, fixed: 'left',width:120}
                    , {field: 'ldhm', title: '来电号码', sort: true,width:120}
                    , {field: 'khmc', title: '客户名称', sort: true,width:120}
                    , {field: 'khxb', title: '性别', sort: true,width:80,templet:(res)=>{return res.khxb=='1'?'男':'女';}}
                    , {field: 'gtnr', title: '沟通内容', sort: true,width:120}
                    , {field: 'zxcp', title: '质询产品', sort: true,width:120}
                    , {field: 'zzjxsj', title: '最早进线时间',sort: true,width:230,templet: function(res){return formatDateTime(res.zzjxsj);}}
                    , {field: 'gxsj', title: '更新时间',sort: true,width:230,templet: function(res){return formatDateTime(res.gxsj);}}
                    , {field: 'dhfsj', title: '待回访时间',sort: true,width:230,templet: function(res){return formatDateTime(res.dhfsj);}}
                    , {field: 'username', title: '归属员', sort: true,width:120}
                    , {field: 'yggh', title: '归属员工号', sort: true,width:120}
                    , {field: 'khzl', title: '客户质量', sort: true,width:120}
                    , {field: 'khly', title: '客户来源', sort: true,width:120}
                    , {field: 'khxq', title: '客户需求', sort: true,width:120}
                    , {field: 'khbz', title: '备注', sort: true,width:120}
                    , {fixed: 'right',title: '操作',width: 165,align:'center',templet:"#bar"}
                ],
                searhDatas_:"",
                hfclClick:'jrdhf',//点击了的tab
                c_hfclLoaded:{//回访处理 列表 tab
                    jrdhf:true,
                    jrjx:true,
                    wdkh:true,
                    hykh:true,
                    wcjkh:true,
                    hfcx:true,
                },
                index:"",
            }
        },
        methods:{
            tabList:function (id) {//切换 历史记录与订单 tab
                this.hfclClick = id;//点击的tab
                if(this.c_hfclLoaded[id]) {
                    this.cx(id);
                    this.$set(this.c_hfclLoaded,id,false)//设置点击了那个变为false,标志
                }
            },
            cx:function (id) {//查询列表
                switch (id) {
                    case 'jrdhf':
                        this.params.dhfsj = this.$my_.getDayStartTimeStamp();
                        break;
                    case 'jrjx':
                        this.params.gxsj = this.$my_.getDayStartTimeStamp();
                        break;
                    case 'wdkh':
                        this.params.gsid = this.$cache_.getCookie('gsid');
                        break;
                    case 'wcjkh':
                        this.params.wcj = 1;
                        break;
                }
                this.$cache_.layuiCachedTable(this,{
                    elem: "#"+id+"List"
                    , url: burl + 'crm-hot-center-hfcl/list' //数据接口
                    , toolbar: '#default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , title: ''
                    , where:{CrmHwzxSearch:this.params}
                    , method:"post"
                    , height: 360
                    , cols: [this.header]
                    , page: true //开启分页
                });
                //监听行工具事件
                layui.table.on('tool('+id+'List)', (obj)=>{
                    //查询到相对于的文件
                    switch(obj.event) {
                        case 'view'://查看一条数据
                            allIndex = layer.open({//弹出窗口
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ["70%", "70%"], //宽高
                                close: true,
                                maxmin: true,
                                shadeClose: true,
                                content:$("#khxx"),
                            });
                            this.searhDatas = !this.searhDatas;//搜索数据
                            this.shadeClose = !this.shadeClose;//关闭遮罩
                            this.editClose = !this.editClose;//关闭编辑
                            this.searhDatas_ = obj.data;//赋值数据
                            break;
                        case 'edit'://编辑该条数据
                            allIndex = layer.open({//弹出窗口
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ["70%", "70%"], //宽高
                                close: true,
                                offset:"r",
                                maxmin: true,
                                shade: false,
                                content:$("#khxx"),
                                end: ()=>{//关闭隐藏
                                    this.$parent.operation={//操作,控制按钮的显示与可以操作
                                        cx: true,
                                        jrdhf: false,
                                        hfcl: false,
                                        bc: false,
                                        qx: false,
                                        cxkh: false,
                                        rwb: true,
                                        gb: true,
                                    };
                                    obj.update(this.$ref['khxx'].saveDatas)//更新列表数据
                                },
                            });
                            this.searhDatas = !this.searhDatas;//s搜索数据
                            this.shadeClose = !this.shadeClose;//关闭遮罩
                            this.editOpen = !this.editOpen;//关闭编辑
                            this.searhDatas_ = obj.data;//赋值数据
                            this.$parent.operation.bc = true;
                            break;
                    }
                });
                //行点击事件
                layui.table.on('row('+id+'List)', (obj)=>{
                    noCheckCache = true;
                    this.$parent.params.ldhm = obj.data.ldhm;//拿到 唯一的id
                    this.$parent.lsjlyddRefresh = !this.$parent.lsjlyddRefresh;//刷新历史记录与订单
                });
                this.params.dhfsj = '';
                this.params.gxsj = '';
                this.params.gsid = '';
                this.params.wcj = '';
            }
        },
    }
</script>